<template>
  <div class="dv2">
    <div id="dv1">
      <van-circle
          v-model:current-rate="currentRate"
          :rate="rate"
          size="30px"
          layer-color="#ebedf0"
          :text="str1"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "MainView",
  data() {
    return {
      rate: 60,
      str1: "3s",
      currentRate: 60
    }
  }, mounted() {
    var t = setInterval(() => {
      if (this.currentRate > 0) {
        this.currentRate -= 20;
        this.str1 = this.currentRate / 20 + "s";
      } else {
        clearInterval(t);
        this.$router.push("/login");
      }
    }, 1000)
  }
}
</script>

<style scoped>
#dv1 {
  clear: both;
  width: 100%;
  height: 100%;
  margin-top: 10px;
}
.dv2{
  float: start;
  width: 402px;
  height: 750px;
  background: url("https://img2.baidu.com/it/u=1693083994,3131953935&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1169");
  background-size: cover;
}
</style>